<template>
  <div id="asiderBar">
    <el-card class="box-card" style="background-color: #ffffff;color: #000000;overflow:auto;max-height: 99%;">
      <div slot="header" class="clearfix" >
        <h2 style="margin: 0;color: #4b4e53"><i class="el-icon-edit"></i>&emsp;项目信息</h2>
      </div>
      <div  class="text item" >
        <el-button type="goon" size="medium"  style="width:100%;" round  @click="addProj">新增项目信息</el-button>
      </div>
      <div  class="text item" style="margin-top: 10px">
        <!--        <el-button icon="el-icon-thumb" size="small" style="padding: 9px;border: 1px solid black">输入坐标</el-button>-->
        <h4 style="margin: 0;color: #a5b1ad;font-weight: normal;float: left;">&emsp;坐标: </h4><select v-model="value1"  @change="showjwd" style="margin-left: 10%;width: 64%;
    height: 23px;
    border-radius: 10px;">
        <option
          label="十进制"
          value="sjz"
        >
        </option>
        <option
          label="经纬度"
          value="jwd"
         >
        </option>
      </select>
        <div style="margin-top: 5px" v-show="show1">
          <el-input  placeholder="输入经度"  type="number" max="180" min="-180" size="mini" v-model="jingdu"  style="width: 35%;margin-left: 5%;height: 33px"></el-input>
          <el-input  placeholder="输入纬度"  type="number" max="180" min="-180"  size="mini" v-model="weidu"  style="width: 35%;margin-left: 5%;height: 33px;margin-top: 2px"></el-input>
          <el-button type="goon" style="padding: 5px;width: 20%;height: 30px" size="small" round @click="hzPoint2">确定</el-button>
        </div>
        <div style="margin-top: 8px" id="jingweidu" v-show="!show1">
          <div>
          <span style=" color: rgb(165, 177, 173); font-weight: normal;font-size: 14px"> 经度：</span><el-input    size="mini" v-model="jdu"  style="width: 15%;margin-left: 5%;height: 30px"></el-input>°
          <el-input   size="mini" v-model="jfen"  style="width: 15%;margin-left: 5%;height: 30px"></el-input>′
          <el-input  size="mini" v-model="jmiao"  style="width: 15%;margin-left: 5%;height: 30px"></el-input>″
          </div>
          <div>
          <span style=" color: rgb(165, 177, 173); font-weight: normal;font-size: 14px"> 纬度：</span><el-input   v-model="wdu"  style="width: 15%;margin-left: 5%;height: 30px"></el-input>°
          <el-input size="mini" v-model="wfen"  style="width: 15%;margin-left: 5%;height: 30px"></el-input>′
          <el-input   size="mini" v-model="wmiao"  style="width: 15%;margin-left: 5%;height: 30px"></el-input>″
          <el-button type="goon" style="padding: 5px;width: 20%;height: 30px;margin-left: 80%;" size="small" round @click="hzPoint3">确定</el-button>
          </div>
        </div>
      </div>
      <div  class="text item" style="margin-top: 10px" >
        <!--      <el-button icon="el-icon-thumb" size="small" style="padding: 9px;border: 1px solid black">手动标绘</el-button>-->
        <h4 style="margin: 0;color: #a5b1ad;font-weight: normal">&emsp;手动绘制</h4>
        <div style="margin-top: 10px">
          <el-button type="goon" style="padding: 5px;width: 30%;" size="small" round @click="hzPoint">点</el-button>
          <el-button type="goon" style="padding: 5px;width: 30%;" size="small" round @click="hzLine">线</el-button>
          <el-button type="goon" style="padding: 5px;width: 30%;" size="small" round @click="hzReo">面</el-button>
        </div>
      </div>
      <div  class="text item" style=" margin-top: 10px;text-align: center">
        <h6 style="color: #a5b1ad;font-weight: normal;margin:0">#仅支持经纬度Shape文件</h6>
        <input type="file" id="file1" name="shpfile" style="display: none"/>
        <el-button type="goon" size="medium" style="width:100%;" round  @click="uploadShp">上传文件</el-button>
      </div>
      <div  class="text item" style=" margin-top: 10px;text-align: center">
        <h6 style="color: #a5b1ad;font-weight: normal;margin:0">#仅支持单个线或者面</h6>
        <h4 style="margin: 0;color: #a5b1ad;font-weight: normal;float: left;">&emsp;类型: </h4><select v-model="value2"  style="margin-left: 10%;width: 64%;
    height: 23px;
    border-radius: 10px;">
        <option
          label="线"
          value="line"
        >
        </option>
        <option
          label="面"
          value="reo"
        >
        </option>
      </select>
        <el-button type="goon" size="medium" style="width:100%;margin-top: 8px" round  @click="manyPoint">输入多个坐标点</el-button>
      </div>
     <!-- <div  class="text item" style="margin-top: 10px">
        <el-button type="goon" size="medium"  round style="width:100%;background:#f65050;color: #fff">重置内容</el-button>
      </div>-->
    </el-card>
    <el-card class="box-card" style="background-color: #ffffff;color: #000000;overflow:auto;max-height: 99%;">
      <div slot="header" class="clearfix" >
        <h2 style="margin: 0px;color:#4b4e53"><i style="font-size: 20px;" class="el-icon-s-management"></i>&emsp;项目智能研判分析</h2>
      </div>
      <div  class="text item">
        <el-button type="goon" round size="medium" style="width: 100%;font-size: 14px;" @click="tjctfx"  v-has="'yanpan'">智能研判分析</el-button>
      </div>
      <div  class="text item" style="margin-top: 10px">
        <!--<el-button type="goon" size="medium" round style="width: 100%;font-size: 14px;">清单准入分析</el-button>-->
        <el-button type="goon" size="medium" round style="width: 100%;font-size: 14px;" @click="mingLuTuiJian" v-has="'yanpan'">根据名录推荐项目落点</el-button>
      </div>
      <!--<div  class="text item" style="margin-top: 10px">
        <el-button type="goon"  size="medium" round style="width: 100%;font-size: 14px;">管控单元限制分析</el-button>
      </div>-->
    </el-card>
    <!--<el-card class="box-card" style="background-color: #ffffff;color: #000000;overflow:auto;max-height: 99%;">-->
      <!--<div slot="header" class="clearfix" >-->
        <!--<h2 style="margin: 0px;color:#4b4e53"><i style="font-size: 20px;" class="el-icon-magic-stick"></i>&emsp;能耗分析</h2>-->
      <!--</div>-->
      <!--<div  class="text item">-->
        <!--<el-button type="goon" round size="medium" style="width: 100%;font-size: 14px;" @click="nhfx" v-has="'nenghao'">能耗智能分析</el-button>-->
      <!--</div>-->
      <!--<div  class="text item" style="margin-top: 10px">-->
        <!--<el-button type="goon" round size="medium" style="width: 100%;font-size: 14px;" @click="addwz" v-has="'addWuzi'">新增物质</el-button>-->
      <!--</div>-->
      <!--<div  class="text item" style="margin-top: 10px">-->
        <!--<el-button type="goon" round size="medium" style="width: 100%;font-size: 14px;" @click="addcp" v-has="'addWuzi'">新增产品</el-button>-->
      <!--</div>-->
      <!--&lt;!&ndash;<div  class="text item" style="margin-top: 10px">-->
        <!--<el-button type="goon"  size="medium" round style="width: 100%;font-size: 14px;">管控单元限制分析</el-button>-->
      <!--</div>&ndash;&gt;-->
    <!--</el-card>-->
  </div>
</template>

<script>
  import  eventBus from '../../assets/js/eventBus'
  import {open} from 'shapefile'
  export default {
    name: 'jcLeft',
    data() {
      return {
        value:0,
        value1:'sjz',
        hcqShow:false,
        jingdu:null,
        weidu:null,
        jdu:null,
        jfen:null,
        jmiao:null,
        wdu:null,
        wfen:null,
        wmiao:null,
        show1:true,
        value2:'reo'
      };
    },
    created () {
    },
    methods: {
      hzPoint(){
        eventBus.$emit('hztype','point')
      },
      hzPoint2(){
        if (this.jingdu>=97 || this.jingdu<=73 || this.weidu>=78 || this.weidu<=-88) {
          this.$message.error('您输入的经纬度不合法，请重新输入')
        }else {
          var pointdian=[this.jingdu,this.weidu]
          eventBus.$emit('hztype2',pointdian)
        }
      },
      hzPoint3(){
        console.log(this.isNumber(this.jdu))
        if(this.isNumber(this.jdu) && this.isNumber(this.jfen) && this.isNumber(this.jmiao) &&this.isNumber(this.wdu) && this.isNumber(this.wfen) && this.isNumber(this.wmiao)){
          var pointdian2=[this.jwdzsjz(this.jdu,this.jfen,this.jmiao),this.jwdzsjz(this.wdu,this.wfen,this.wmiao)];
          eventBus.$emit('hztype2',pointdian2)
        }else {
          this.$message.error('您输入的经纬度不合法，请重新输入')
        }
      },
      hzLine(){
        eventBus.$emit('hztype','line')
      },
      hzReo(){
        eventBus.$emit('hztype','reo')
      },
      tjctfx(){
        eventBus.$emit('chongtu','chongtu');
      },
      nhfx(){
        eventBus.$emit('nenghao','nenghao');
      },
      addwz(){
        eventBus.$emit('nenghao','add');
      },
      addcp(){
        eventBus.$emit('nenghao','addcp');
      },
      mingLuTuiJian(){
        eventBus.$emit('chongtu','tuijian');
      },
      bufferFx(){
        this.hcqShow=!this.hcqShow
      },
      uploadShp(){
        document.getElementById("file1").click();
        document.getElementById("file1").addEventListener("change",function () {
          var shparray,dbfarray,feas=[];
          console.log(document.getElementById("file1"))
          var shpfiles = document.getElementById("file1").files;
          console.log(shpfiles)
          if (shpfiles.length == 0) {
            //alert('请选择shp文件');
          } else {
            var reader = new FileReader();//新建一个FileReader
            reader.readAsArrayBuffer(shpfiles[0]);//读取文件
            reader.onload = function (evt) { //读取完文件之后会回来这里
              console.log(evt)
              shparray = evt.target.result;//evt.target.result 为ArrayBuffer形式的文件
              open(shparray, dbfarray, {encoding: "utf-8"}).then(source => source.read()
                .then(function log(result) {
                  if (result.done) {
                    eventBus.$emit('hztype1',feas);
                    return;
                  }
                  feas.push(result.value)
                  return source.read().then(log);
                }))
                .catch(error => console.error(error.stack));
            }
          }
        });
      },
      manyPoint(){
        eventBus.$emit('manyPoint',this.value2);
      },
      huanchong(){
        var index=document.getElementById("bufferType").selectedIndex;
        var options=[document.getElementById("bufferType").options[index].value,this.value]
        eventBus.$emit('huanchong',options);
      },
      addProj(){
        eventBus.$emit('addProj','addProj');
      },
      showjwd(){
        console.log(this.value1)
        this.show1=!this.show1;
      },
      jwdzsjz(du,fen,miao){
        return Math.abs(du) + (Math.abs(fen)/60 + Math.abs(miao)/3600);
      },
      isNumber(val) {
    var regPos = /^\d+(\.\d+)?$/; //非负浮点数
    var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
    if(regPos.test(val) || regNeg.test(val)) {
      return true;
    } else {
      return false;
    }
  }
    },

  }
</script>

<style lang="less" scoped>
  #asiderBar{
    position: absolute;
    width: 14%;
    top: 9.5%;
    bottom: 1.5%;
    left: 1%;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 5px #acc4fe;
  }
  /deep/ .el-card__body{
    padding-top: 10px;
    //padding-bottom: 10px;
  }
  .el-card{
    /deep/ .el-card__header{
      //background-color: #0099ff;
      padding-left: 8px;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    /deep/  .el-input__inner{
      height: 35px;
      padding: 0 2px;
    }
    /deep/ .el-slider__input{
      float: left;
      .el-input--small{
        input{
          height: 30px;
        }
      }
    }
    /deep/ .show-input{
      display: none;
    }

    .hcbtn{
      //background-color: #67C23A;
      //border-color: #67C23A;
      color: #a5b1ad;
      padding: 7px 10px;
      -webkit-appearance: none;
      text-align: center;
      box-sizing: border-box;
      outline: 0;
      margin: 0;
      transition: .1s;
      font-weight: 500;
      border: 1px solid #DCDFE6;
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      height:28px;
      //border-radius: 4px;;
    }
  }
  /deep/.el-input__inner {
    //width: 220px;
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    /*outline: medium;*/
  }

  ::v-deep .el-button:focus, .el-button:hover {
    color: #fff;
    border-color: #c6e2ff;
    background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
  }
  ::v-deep .el-button--goon:active {
    color: #fff;
    border-color: #c6e2ff;
    outline: 0;
  }

#jingweidu{
  /deep/  .el-input__inner{
    height: 24px;
    padding: 0 2px;
  }
}
</style>
